<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList — 千锋教育版权所有</title>
    <link rel="stylesheet" href="./assets/css/style.css" />
</head>

<body>
    <header>
        <section>
                <label for="title">
                    <img
                        src="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/619cd39e955cea7c6718d38afd084162002a1dab.jpeg?sign=f3720165756a2ba0971a4298d71e755e&t=6077acca" />
                </label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                    autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount">0</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- <li>
                    <input type="checkbox" />
                    <p onclick="edit(1)">吃饭</p>
                    <a href="javascript:remove(1)">-</a>
                </li>
                <li>
                    <input type="checkbox" />
                    <p onclick="edit(2)">睡觉</p>
                    <a href="javascript:remove(2)">-</a>
                </li>
                <li>
                    <input type="checkbox" />
                    <p onclick="edit(3)">打豆豆</p>
                    <a href="javascript:remove(3)">-</a>
                </li> -->
        </ol>
        <h2>已经完成 <span id="donecount">0</span></h2>
        <ul id="donelist">
            <!-- <li>
                    <input type="checkbox" checked="checked" />
                    <p onclick="edit(4)">喝酒</p>
                    <a href="javascript:remove(4)">-</a>
                </li>
                <li>
                    <input type="checkbox" checked="checked" />
                    <p onclick="edit(5)">蹦迪</p>
                    <a href="javascript:remove(5)">-</a>
                </li> -->
        </ul>
    </section>
    <footer>
        <p>
            Copyright &copy; 2021 千锋教育 版权所有
            <a href="javascript:;">京ICP备15058198号</a>
        </p>
        <p>
            您当前的ip地址是：<strong id="ipv4">106.38.62.154</strong>，地理位置：<strong id="addr">北京市 电信互联网数据交换中心</strong>
        </p>
    </footer>
    <script type="text/javascript" src="./assets/js/index.js"></script>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            loadPage();
            $("#title").keydown(function (e) {
                if (e.keyCode === 13) {
                if ($(this).val() === "") {
                alert("请输入您要输入的内容")
            } else {
                var localDate = getLocalStorage();
                console.log(localDate);
                localDate.push({
                    title: $(this).val(),
                    done: false
                });
                setLocalStorage(localDate);
                loadPage();
            }
            $(this).val("");
            }
        })

        $("#todolist,#donelist").click(e=> {
            if(e.target.tagName === 'A'){
                var index = $(e.target).attr("id");
                console.log(index);
                var localDate = getLocalStorage();
                localDate.splice(index, 1);
                setLocalStorage(localDate);
                loadPage();
            }   
        })

        $("#todolist,#donelist").click( e=> {
            if(e.target.tagName === 'INPUT'){
                var localDate = getLocalStorage();
                var index = $(e.target).siblings("a").attr("id");
                localDate[index].done = $(e.target).prop("checked");
                setLocalStorage(localDate);
                loadPage();
            }
        })
        function loadPage() {
            var date = getLocalStorage();
            $("#todolist,#donelist").empty();
            var a = 0;
            var b = 0;
            $.each(date, function (i, ele) {
                if (ele.done) {
                    $("#donelist").prepend("<li><input type = 'checkbox' checked><p>" + ele.title + "</p><a href = '#' id=" + i + "></a></li>")
                    a++;
                } else {
                    $("#todolist").prepend("<li><input type = 'checkbox'><p>" + ele.title + "</p><a href = '#' id=" + i + "></a></li>")
                    b++;
                }
            })
            $("#todocount").text(b);
            $("#donecount").text(a);

    
        }

        function getLocalStorage() {
            var date = localStorage.getItem("toDoList");
            if (date != null) {
                return JSON.parse(date);
            } else {
                return []; 
            }
    
        }
        function setLocalStorage(date) {
            localStorage.setItem("toDoList", JSON.stringify(date));

        }


})

    </script>
</body>

</html>